import classNames from "classnames";
import "./index.scss";
import { useDispatch, useSelector } from "react-redux";
import { setActiveIndex } from "../../store/modules/takeaway";

// 菜单组件
const Menu = (props) => {
  // 整理菜单数据
  const menus = props.foodsList.map((item) => ({
    tag: item.tag,
    name: item.name,
  }));
  // 从仓库中获取当前激活菜单下标
  const { activeIndex } = useSelector((state) => state.foods);
  // 获取dispatch用于调用action方法
  const dispatch = useDispatch();
  return (
    <nav className="list-menu">
      {/* 添加active类名会变成激活状态 */}
      {menus.map((item, index) => {
        return (
          <div
            key={item.tag}
            className={classNames("list-menu-item", {
              active: activeIndex === index,
            })}
            onClick={() => dispatch(setActiveIndex(index))}
          >
            {item.name}
          </div>
        );
      })}
    </nav>
  );
};

export default Menu;
